<template>
  <view style="background-color: aquamarine;" class="card-container">
   
    <text class="title">{{ title }}</text>
    
    <view class="info-bar">
    
      <view class="left-info">
        
        <text class="top-tag" v-if="isTop">置顶</text>
        <text class="author">{{ author }}</text>
        <text class="comments">{{ comments }}评</text>
      </view>
      
      
      <text class="time">{{ time }}</text>
    </view>
  </view>
</template>
<script>
export default {
  name: "cardViewText",
  props: {
    title: { type: String, default: "" },
    isTop: { type: Boolean, default: false },
    author: { type: String, default: "" },
    comments: { type: Number, default: 0 },
    time: { type: String, default: "" }
  },
  data() {
    return {
     
    };
  }
};
</script>
<style scoped>

.card-container {
  padding: 15rpx;
  border-bottom: 1px solid #eee; /* 底部分隔线 */
  margin-bottom: 10rpx;
}


.title {
  display: block; /* 让标题独占一行 */
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
  line-height: 1.4; /* 行高适中，避免换行拥挤 */
}

.info-bar {
  display: flex;
  justify-content: space-between; /* 左右内容两端对齐 */
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.left-info {
  display: flex;
  align-items: center;
  gap: 15rpx; 
}


.top-tag {
  background-color: #f00;
  color: #fff;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.comments {
  color: #999;
}
</style>